<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :leftType="'1'" @clickLeftBack="clickLeftBack"
				:title="$t('smashRemoval.salesOrderN')" scanType="0"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="page-auto-noheight paddingbottom">
				<!-- 调拨单信息 -->
				<view class="custom-form-card">
					<view class="custom-card-title">
						<text class="title-line"></text>
						{{ $t('smashRemoval.salesOrderN') }}
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('locationBarcodeInfo.orderNo') }}：{{ data.enterDetails.soCode
						}}</text>
					</view>
					<view class="custom-card-itemOne">
						<view class="card-item-50" style="width: 100%;">
							<text class="item-info-title">{{ $t('locationBarcodeInfo.orderDate') }}：</text>{{
								data.enterDetails.soDate }}
						</view>
					</view>
					<view class="custom-card-itemOne">
						<view class="card-item-50">
							<text class="item-info-title">{{ $t('locationBarcodeInfo.auditor') }}：</text>{{
								data.enterDetails.checkUserName
							}}
						</view>
						<view class="card-item-50">
							<text class="item-info-title">{{ $t('locationBarcodeInfo.parities') }}：</text>{{
								data.enterDetails.exchangeRate }}
						</view>
					</view>
					<view class="custom-card-itemOne">
						<view class="card-item-50">
							<text class="item-info-title">{{ $t('pageTranslation.batchNo') }}：</text>{{
								data.enterDetails.lotNo }}
						</view>
						<view class="card-item-50">
							<text class="item-info-title">{{ $t('locationBarcodeInfo.customerCode') }}：</text>{{
								data.enterDetails.customerCode }}
						</view>
					</view>
					<view class="custom-card-itemOne">
						<view class="card-item-50">
							<text class="item-info-title">{{ $t('locationBarcodeInfo.nationality') }}：</text>{{
								data.enterDetails.countryName }}
						</view>
						<view class="card-item-50">
							<text class="item-info-title">{{ $t('locationBarcodeInfo.currency') }}：</text>{{
								data.enterDetails.currency }}
						</view>
					</view>
				</view>
				<view class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-margin-top">
					<view class="gui-title-line"></view>
					<text class="gui-primary-text gui-h6" style="padding-left:50rpx; padding-right:50rpx;">{{
						$t('smashRemoval.salesOrderNo') }}：{{ data.salesOrders }}</text>
					<view class="gui-title-line"></view>
				</view>
				<uni-card class="element-auto gui-margin-top card-my">
					<view class="element-auto" style="height: 300rpx">
						<zb-table :columns="data.column1" :stripe="true" :border="true" :data="tableData.list"
							@customLook="customBtnFn" :cell-style="cellStyle" :cell-header-style="cellHeaderStyle">
						</zb-table>
					</view>
				</uni-card>
				<view style="height: 150rpx;"></view>
				<!-- 底部操作栏 -->
				<view class="page-bottom-box bottom-postion">
					<view class="page-bottomBtn bottomBtn-bgcolor-green" @click="print">
						{{ $t('multilingual.print') }}
					</view>
					<view class="page-bottomBtn" @click="upload" style="background:#3992f8">
						{{ $t('locationBarcodeInfo.upload') }}
					</view>
				</view>
			</view>
			<!-- 普通弹窗 表格查看 -->
			<uni-popup ref="popup" type="center">
				<view class="input-dialog-box" style="padding: 40rpx 20rpx 20rpx 20rpx;border-radius: 22rpx;width: 600rpx;">
					<uni-icons class="popup-close-icons" type="closeempty" color="#9C9C9C" size="26"
						@click="closePopup"></uni-icons>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('locationBarcodeInfo.orderNo') }}：</text>{{
							data.popupInfo.soCode }}
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('locationBarcodeInfo.isActivate') }}：</text>{{
							data.popupInfo.isActivate == 'Y' ? '激活' : '终止' }}
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('distributedEnter.materialCode') }}：</text>{{
							data.popupInfo.materialCode }}
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('distributedEnter.materialName') }}：</text>{{
							data.popupInfo.materialName }}
					</view>
					<view class="custom-card-itemOne flex-start">
						<view class="item-info-title">{{ $t('distributedEnter.materialSpec') }}：</view>
						<view class="specview">{{ data.popupInfo.materialSpec }}</view>
					</view>

					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('distributedEnter.uom') }}：</text>{{ data.popupInfo.unit }}
					</view>

					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('materials.salesQuantity') }}：</text>{{
							data.popupInfo.salesQty }}
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('slottedAsh.qtyShipped') }}：</text>{{
							data.popupInfo.qty }}
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('materials.dateOfDelivery') }}：</text>{{
							data.popupInfo.deliveryDate }}
					</view>
				</view>
			</uni-popup>

			<!-- 页面弹窗 -->
			<uni-popup ref="inputDialog" type="center">
				<view class="input-dialog-box">
					<view class="input-dialog-content">
						<view class="example-body">
							<uni-file-picker :auto-upload='false' @select="select" v-model="data.uploadImg" :limit="1"
								:readonly="data.testList.length != 0"></uni-file-picker>
							<view style="line-height: 30px;" v-if="!data.uploadImg.length && data.testList.length">
								{{ $t('translationImage.notAvailableImg') }}
							</view>
						</view>
					</view>
					<view class="input-dialog-footer">
						<view class="input-dialog-button" @click="cancelFn">
							{{ $t('popup.cancel') }}
						</view>
						<view class="input-dialog-button dialog-button-left" @click="confirmFn">
							{{ $t('popup.confirm') }}
						</view>
					</view>
				</view>
			</uni-popup>
		</template>
	</gui-page>
</template>

<script setup>
import { TEST_URL, PROD_URL, IMG_BASE_URL } from '@/constant/config.js'
import { TOKEN } from '@/constant/index.js';
import graceJS from "@/Grace6/js/grace.js";
import { navigate, navigateBack } from '@/utils/routerSkip.js';
import { reactive, ref, onMounted, computed, } from 'vue';
import { getPageSetOrderD, getPageSetOrderH, printBOL, uploadBOL } from '@/api/api.js';
import tableColor from '@/hooks/tableColor.js';
import storageBin from '@/components/storageBin.vue';
import { useStore } from "vuex";
//JS国际化引入
import { useI18n } from 'vue-i18n';
import { onBackPress } from '@dcloudio/uni-app';

components: { storageBin }

const { t } = useI18n();
let store = useStore()

let { tableData } = tableColor();
const { cellStyle, cellHeaderStyle } = tableColor();

const props = defineProps({
	id:String,
	salesOrders:String,	
})
let popup = ref(null)
let inputDialog = ref(null)

let data = reactive({
	id: props.id, // 上级界面传过来的id
	salesOrders: props.salesOrders, // 销售订单号
	list: [],
	value: ['0'],
	selectedText: '',
	selectId: '',
	organizationEnterList: [],
	locationId: '',
	currentLocationInfo: {}, //当前选中库位信息
	barcode: '',
	column1: [{
		name: 'age',
		type: 'ailibtn',
		label: t('translationImage.operation'),
		scanValue: '',
		fixed: true,
		width: 80,
	},
	{
		name: 'soCode',
		label: t('locationBarcodeInfo.orderNo'),
		fixed: true,
		width: 100,
		sorter: false,
		emptyString: '--'
	},
	{
		name: 'soLine',
		label: t('locationBarcodeInfo.orderLineNo'),
	},
	{
		name: 'isActive',
		label: t('locationBarcodeInfo.isActivate'),
		filters: { Y: '激活', N: '终止' }
	},
	{
		name: 'fentryId',
		label: t('locationBarcodeInfo.fentryId'),
	},
	{
		name: 'materialCode',
		label: t('distributedEnter.materialCode'),
	},
	{
		name: 'materialName',
		label: t('distributedEnter.materialName')
	}, {
		name: 'materialSpec',
		label: t('distributedEnter.materialSpec')
	},
	//销售数量
	{
		name: 'salesQty',
		label: t('materials.salesQuantity'),
	},
	{
		name: 'qty',
		label: t('slottedAsh.qtyShipped'),
	},
	{
		name: 'deliveryDate',
		label: t('materials.dateOfDelivery'),
	},
	{
		name: 'customerModel',
		label: t('locationBarcodeInfo.customerModel'),
	},
	{
		name: 'unit',
		label: t('distributedEnter.uom'),
	},
	{
		name: 'isGiveAway',
		label: t('locationBarcodeInfo.isGift'),
		filters: { Y: '是', N: '否' }
	}
	],
	enterDetails: {},
	popupInfo: {}, //当前行的弹窗信息
	testList: [], //上传图片
	uploadImg: [],
	imgIndex: 0, //用户当前点击行数索引
	tempFile: '',
	tempFilePaths: ''
})
onMounted(() => {
	// 销售订单查询
	getPageSetOrderH({
		soDateStartTime: '',
		soDateEndTime: '',
		soCode: props.salesOrders,
		page: 1,
		rows: 20
	}).then(res => {
		try {
			let inputParameter = JSON.stringify(parmes)
			let returnParameter = JSON.stringify(res)
			let operationPicture = '销售订单'
			let callInterface = res.rquestUrl
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode: 200,//返回状态
				errorMessage: '',//错误信息
				isPass: res ? 'Y' : 'N',//是否成功 Y N
				operationType: type
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) {
		}
		if (res) {
			data.enterDetails = res.rows[0]
		}
	})
	// 明细行查询
	findStepoutHByIdFn()
})


onBackPress((options) => {
	if (options.from == 'backbutton') {
		navBackCheck()
		return true;
	}
})
//导航栏左侧返回
const clickLeftBack = () => {
	navBackCheck()
}
const navBackCheck = () => {
	uni.navigateBack({
		delta: 1
	});
	return true
}


// 根据id查询销售订单明细
const findStepoutHByIdFn = () => {
	let parmes = {
		soid: props.id
	}
	getPageSetOrderD(parmes).then(res => {
		try {
			let inputParameter = JSON.stringify(parmes)
			let returnParameter = JSON.stringify(res)
			let operationPicture = '销售订单'
			let callInterface = res.rquestUrl
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode: 200,//返回状态
				errorMessage: '',//错误信息
				isPass: res ? 'Y' : 'N',//是否成功 Y N
				operationType: type
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) {
		}
		if (res) {
			tableData.list = res.rows;
		} else {
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
		}
	})
}

// 表格的点击
const customBtnFn = (item, index) => {
	data.popupInfo = item;
	popup.value.open()
}
const closePopup = () => {
	popup.value.close()
}


// 打印
const print = () => {
	printBOL({ poNumber: props.salesOrders }).then(res => {
		console.log(res)
		if (res.statusCode == 200) {
			uni.showToast({
				title: t('JsInternational.printSuccessfully')
			});
		} else {
			uni.showToast({ title: res.message, icon: 'none' })
		}
	})

}
// 上传
const upload = () => {
	// 点击打开弹框
	inputDialog.value.open();

}

// 弹框取消
const cancelFn = () => {
	inputDialog.value.close();
	data.uploadImg = []
	data.testList = []
}

const confirmFn = () => {
	data.testList[data.imgIndex] = data.uploadImg
	console.log(data.testList[data.imgIndex])
	let isDev = process.env.NODE_ENV === 'development';
	let baseUrl = isDev ? TEST_URL : PROD_URL
	let token = uni.getStorageSync(TOKEN);
	let formData = {
		poNumber: props.salesOrders ,
		BOLfile: data.tempFile
	}
	uni.showLoading({
		title: t('JsInternational.uploading')
	});
	uni.uploadFile({
		url: baseUrl + '/wms/hmtxPo/uploadBOL', //上传接口
		BOLfile: 'file',
		header: {
			// "content-type": "multipart/form-data",
			'token': token
		},
		filePath: data.tempFilePaths[0],
		formData: formData,
		success: (uploadFileRes) => {
			uni.hideLoading();
			const back = JSON.parse(uploadFileRes.data);
			if (back.statusCode == 200) {
				let imgPath = back.data;
				data.uploadImg.push({
					name: '',
					extname: 'png',
					url: imgPath
				})
			} else {
				uni.showToast({ title: back.message, icon: "none" });
			}
		},
		fail: () => {
			uni.hideLoading();
			uni.showToast({title:t('JsInternational.pictureUploading'),icon: "error" })
		},
		complete: function () {
			uni.hideLoading();
		}
	});
}
// 上传图片获取开始上传
const select = (e) => {
	data.imgName = e.tempFiles[0].name
	data.tempFile = e.tempFiles[0].file

	data.tempFilePaths = e.tempFilePaths;
}
</script>

<style scoped lang="scss">
.page-bottom-box {
	z-index: 100;
}

.flex-start {
	align-items: flex-start !important;
}

.specview {
	width: 70%;
	white-space: normal;
	word-break: break-all;
	flex: 1;
}
</style>